<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <style>
        .webuploader-pick{
            width: 200px;
        }

    </style>


    <div style="width: 100%;padding-top: 20px;">

        <div id="i_w_importdoc_attached_div" class="wu-example" style="width: 100%;" >
            <div class="btns" style="margin-left: 40%;">
                <div id="i_w_importdoc_picker">选择附件</div>
            </div>
            <!--用来存放文件信息-->
            <div id="i_w_importdoc_uploadlist" class="uploader-list">

            </div>
            <table class="table">
                <caption>上传附件列表</caption>
                <thead>
                <tr>
                    <th>名称</th>
                    <th>大小</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="i_w_importdoc_list">

                </tbody>
            </table>
        </div>

        <div id="" style="width: 100%;">

            <button type="button" class="btn btn-success" style="width: 200px;margin-left: 40%;" onclick="tools_0_cf()">执行拆分</button>


        </div>
        <div id="result_content" style="width: 100%;">


        </div>
    </div>


    <script>
        var upload_file = webrootpath+"file/upload_file"; //上传文件
        var delAttached_link = webrootpath+"doc/delAttached_link"; //删除附件
        var toolsinitexcelcflink = webrootpath+"tools/toolsinitexcelcflink";//执行excel拆分成压缩包

        $(function () {
            $("#result_content").html("");
            loaduploadify();


        });
        //执行拆分
        function tools_0_cf() {
            var att_name_list = "";
            $("input[name='att_name']").each(function (_index,_this) {
                att_name_list+=","+_this.value;
            });
            if(att_name_list==""){
                alert("请上传附件");
                return false;
            }
            $.post(toolsinitexcelcflink,{
                att_name_list:att_name_list
            },function (content) {
                if(content.code=="1"){
                    $.alert({content:content.msg});
                    $("#result_content").html("<a href='"+content.data+"'>"+content.data+"</a>");
                    return false;
                }
            });
        }
        /***
         * 加载上传组件
         */
        function loaduploadify() {
            $("#i_w_importdoc_uploadlist").html("");
            $("#i_w_importdoc_list").html("");

            var uploader = WebUploader.create({
                swf: './webuploader-0.1.5/Uploader.swf',
                auto:true,
                server: upload_file,
                pick: '#i_w_importdoc_picker',
                resize: false,
                fileNumLimit:1,
                formData:{
                    filetype:10
                },
                accept:{
                    title: '文本内容',
                    extensions: 'xlsx',
                    mimeTypes: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                },
                fileSizeLimit:10485760000
            });
            uploader.on( 'fileQueued', function( file ) {

                $("#i_w_importdoc_uploadlist").html( '<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>' );
            });
            uploader.on( 'beforeFileQueued', function( file ) {
                uploader.reset();
            });

            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                    $percent = $li.find('.progress .progress-bar');

                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo( $li ).find('.progress-bar');
                }

                $li.find('p.state').text('上传中并正在处理，请稍等！！！');
                $percent.css( 'width', percentage * 100 + '%' );
            });
            //上传成功
            uploader.on( 'uploadSuccess', function( file,response ) {
                $( '#'+file.id ).find('p.state').text('上传完毕');

                setTimeout(function(){
                    if(response.code=='1'){
                        var htmlstr = "<tr id=\"att"+response.data.attachedid+"\" >"+
                            "<td>"+response.data.truename+"<input name='att_name' value='"+response.data.attachedid+"' style='display: none;' /></td>"+
                            "<td>"+response.data.size+"</td>"+
                            "<td><span class=\"label label-danger\" style='cursor: pointer;'  onclick=\"delAttached('"+response.data.attachedid+"')\">删除</span></td>"+
                            "</tr>";

                        $("#i_w_importdoc_list").append(htmlstr);
                    }
                    $("#i_w_importdoc_uploadlist").html("");
                    uploader.reset();
                },1000);

            });
            uploader.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
                uploader.reset();
            });
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
            });
        }

        /***
         *  删除附件
         */
        function delAttached(attachedid) {
            $.confirm({
                title:"提示",
                content:"您确认删除此附件吗？",
                buttons:{
                    "确定":function () {
                        $.get(delAttached_link,{attachedid:attachedid},function (msg) {
                            if (msg.code=='1'){
                                $("#att"+attachedid).remove();
                                $.confirm({
                                    title: '提示',
                                    content: '成功删除附件！',
                                    autoClose: '确定|2000',
                                    buttons: {
                                        确定: {
                                        }
                                    }
                                });
                            }
                        });
                    },
                    "取消":function () {

                    }
                }
            });
        }
    </script>
</body>
</html>